<script setup lang="ts">
import { useRouter } from 'vue-router';
import moment from 'moment';
import { ref,onMounted , onBeforeUnmount} from 'vue';

// 全局路由对象
const router = useRouter()

// 切回首页
const goHome = () => {
    router.push('/')
}

// 当前时间
const nowTime = ref(moment().format('YYYY-MM-DD HH:mm:ss'));


// 定时器
let timer: any = null;

onMounted(() => {
    timer = setInterval(() => {
        nowTime.value = moment().format('YYYY-MM-DD HH:mm:ss');
    },1000)
})

onBeforeUnmount(() => {
    clearInterval(timer)
})

</script>
<template>
    <div class="top">
        <div class="left">
            <span class="left-btn" @click="goHome">首页</span>
        </div>
        <div class="center">
            <div>智慧旅游可视化大数据平台</div>
        </div>
        <div class="right">
            <span class="right-btn1">统计报告</span>
            <span class="right-btn2">当前时间 {{ nowTime }}</span>
        </div>
    </div>
</template>

<style scoped lang="scss">
    .top {
        width: 1920px;
        height: 40px;
        display: flex;
        padding: 0;
        margin: 0;
        .left {
            flex: 1;
            background-image: url(../images/dataScreen-header-left-bg.png);
            .left-btn {
                float: right;
                background-image: url(../images/dataScreen-header-btn-bg-l.png);
                text-align: center;
                line-height: 40px;
                background-size: 100% 100%;
                color: #29fcff;
                background-repeat: no-repeat;
                font-size: 20px;
                width: 150px;
                height: 40px;
                cursor: pointer;
            }
        } 
        .center {
            flex: 2;
            div{
                height: 74px;
                width: 100%;
                background-image: url(../images/dataScreen-header-center-bg.png) ;
                background-repeat: no-repeat;
                background-size: 100% 100%;
                text-align: center;
                line-height: 74px;
                color: #29fcff;
                font-size: 30px
            }
        } 
        .right {
            flex: 1;
            background: url(../images/dataScreen-header-left-bg.png);
            display: flex;
            justify-content: space-between;
            .right-btn1 {
                background-image: url(../images/dataScreen-header-btn-bg-l.png);
                text-align: center;
                line-height: 40px;
                color: #29fcff;
                background-repeat: no-repeat;
                background-size: 100% 100%;
                font-size: 20px;
                width: 150px;
                height: 40px;
                cursor: pointer;
            }
            .right-btn2 {
                text-align: center;
                line-height: 40px;
                color: #29fcff;
                font-size: 20px;
                height: 40px;
                cursor: pointer;
                margin-right: 2px;
            }
        }
    }
</style>